<template>
	<div>
		<CustomDialog
			:title="state.dialog.title"
			v-model:visible="state.dialog.isShowDialog"
			dialogWidth="900px"
			@close="closeDialog"
			:dialogFooterBtn="true"
			:showSubmit="true"
			@submit="submit"
		>
			<el-form label-width="100px" :model="state.form">
				<div class="title">状态</div>
				<el-form-item label="状态">
					<el-switch v-model="state.form.status" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭" inline-prompt />
				</el-form-item>
				<div class="title">微信登录设置</div>
				<el-form-item label="自动登录">
					<el-switch v-model="state.form.autoLogin" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭" inline-prompt>
					</el-switch>
				</el-form-item>

				<el-form-item label="绑定手机号">
					<el-switch v-model="state.form.autoMobile" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭" inline-prompt />
				</el-form-item>
				<div class="title">分享设置</div>
				<el-form-item label="分享方式">
					<el-checkbox-group v-model="state.form.methods">
						<el-checkbox label="forward"> 直接转发</el-checkbox>
						<el-checkbox label="poster"> 分享海报</el-checkbox>
						<el-checkbox label="link"> 复制链接</el-checkbox>
					</el-checkbox-group>
				</el-form-item>

				<el-form-item label="标题">
          <el-input v-model="state.form.title" clearable/>
				</el-form-item>

				<el-form-item label="副标题">
          <el-input v-model="state.form.subTitle" clearable/>
				</el-form-item>
				<el-form-item label="分享图片">
					<div class="sd-flex">
						<div class="choice-image choice-image-delete" @click="choiceFileImage('share_image')">
							<el-image
								v-if="state.form.shareImg != ''"
								:src="STATIC_URL + state.form.shareImg"
								fit="cover"
								class="cover-image"
								:preview-src-list="[STATIC_URL + state.form.shareImg]"
								:preview-teleported="true"
								@click.stop
							/>
							<el-icon v-else>
								<ele-Plus />
							</el-icon>
							<div class="delete-content" @click.stop="state.form.shareImg = ''" v-if="state.form.shareImg != ''">
								<SvgIcon name="ele-DeleteFilled"></SvgIcon>
							</div>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="用户海报">
					<div class="sd-flex">
						<div class="choice-image choice-image-delete" @click="choiceFileImage('user_poster')">
							<el-image
								v-if="state.form.userPoster != ''"
								:src="STATIC_URL + state.form.userPoster"
								fit="cover"
								class="cover-image"
								:preview-src-list="[STATIC_URL + state.form.userPoster]"
								:preview-teleported="true"
								@click.stop
							/>
							<el-icon v-else>
								<ele-Plus />
							</el-icon>
							<div class="delete-content" @click.stop="state.form.userPoster = ''" v-if="state.form.userPoster != ''">
								<SvgIcon name="ele-DeleteFilled"></SvgIcon>
							</div>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="商品海报">
					<div class="sd-flex">
						<div class="choice-image choice-image-delete" @click="choiceFileImage('goods_poster')">
							<el-image
								v-if="state.form.goodsPoster != ''"
								:src="STATIC_URL + state.form.goodsPoster"
								fit="cover"
								class="cover-image"
								:preview-src-list="[STATIC_URL + state.form.goodsPoster]"
								:preview-teleported="true"
								@click.stop
							/>
							<el-icon v-else>
								<ele-Plus />
							</el-icon>
							<div class="delete-content" @click.stop="state.form.goodsPoster = ''" v-if="state.form.goodsPoster != ''">
								<SvgIcon name="ele-DeleteFilled"></SvgIcon>
							</div>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="拼团海报">
					<div class="sd-flex">
						<div class="choice-image choice-image-delete" @click="choiceFileImage('group_poster')">
							<el-image
								v-if="state.form.groupPoster != ''"
								:src="STATIC_URL + state.form.groupPoster"
								fit="cover"
								class="cover-image"
								:preview-src-list="[STATIC_URL + state.form.groupPoster]"
								:preview-teleported="true"
								@click.stop
							/>
							<el-icon v-else>
								<ele-Plus />
							</el-icon>
							<div class="delete-content" @click.stop="state.form.groupPoster = ''" v-if="state.form.groupPoster != ''">
								<SvgIcon name="ele-DeleteFilled"></SvgIcon>
							</div>
						</div>
					</div>
				</el-form-item>

				<el-form-item label="分享Url">
					<el-input v-model="state.form.shareUrl" />
					<div class="tip">分享链接的默认域名</div>
				</el-form-item>
			</el-form>
		</CustomDialog>

		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>
	</div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, reactive, ref } from 'vue';
import { STATIC_URL } from '/@/utils/config';
import { SettingApi } from '/@/api/shop/setting';
import messageUtils from '/@/utils/messageUtils';

const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const FileChoiceRef = ref();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '平台-微信小程序',
		submitTxt: '',
	},
	form: {
		status: 0,
		autoLogin: 0,
		autoMobile: 0,
		methods: [],
		title: '',
		subTitle: '',
		shareImg: '',
		userPoster: '', // 用户海报
		goodsPoster: '', // 商品海报
		groupPoster: '', // 评团海报
		shareUrl: '',
		type: '',
		id: '',
	},
});

let imageType = '';

const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

const openDialog = async (type: string) => {
	state.dialog.isShowDialog = true;
	console.log('小程序: ', type);
	state.form.type = type;
	if (type === 'H5') {
		state.dialog.title = '平台-H5';
	}
	if (type === 'WechatOfficialAccount') {
		state.dialog.title = '平台-微信公众号';
	}
	state.dialog.title = '平台-微信小程序';
	const { data } = await SettingApi().view_platform(type);
	state.form = data;
};

const choiceFileImage = (type: string) => {
	imageType = type;
	FileChoiceRef.value.openFileChoiceDialog();
};

const choiceFile = (res: any[]) => {
	console.log('choiceFile: ', res[0]);

	if ('share_image' == imageType) {
		state.form.shareImg = res[0].visitRelativePath;
	}
	if ('user_poster' == imageType) {
		state.form.userPoster = res[0].visitRelativePath;
	}
	if ('goods_poster' == imageType) {
		state.form.goodsPoster = res[0].visitRelativePath;
	}
	if ('group_poster' == imageType) {
		state.form.groupPoster = res[0].visitRelativePath;
	}
};

const submit = async () => {
	console.log('submit: ', state.form.methods);
	try {
		const { data } = await SettingApi().update_platform(state.form);
		messageUtils().success('操作成功');
		closeDialog();
	} catch (err) {
		messageUtils().error('操作失败，请稍后重试');
	}
};

defineExpose({ openDialog });
</script>
<style scoped lang="scss">
.title {
	width: 100%;
	color: var(--sd-subtitle);
	padding: 10px 0 10px 16px;
	background: #f7f7fa;
	margin: 0 0 16px;
	font-weight: 500;
	font-size: 14px;
}

.el-form .tip {
	width: fit-content;
	line-height: 16px;
	font-size: 12px;
	color: var(--sd-subfont);
}
</style>
